<template>
  <view>
    <view style="position: fixed;top:0;z-index: 999;left: 0;width: 100%;">
      <kt-nav-bar
          v-if="opt === 'update'"
          :title="'Enterprise Edit'"></kt-nav-bar>
      <kt-nav-bar
          v-else
          :title="'Enterprise Add'"></kt-nav-bar>
    </view>
    <view style="opacity: 0;">
      <kt-nav-bar
          :title="'Enterprise Add'"></kt-nav-bar>
    </view>

    <view
        @click="uploadLogo()"
        class="box a-box">
      <view style="display: inline-block;vertical-align: top;width: calc(100% - 200rpx)">
        <view style="height: 20rpx"></view>
        <view class="title">
          <!-- 企业Logo -->
          {{ "Enterprise Logo" }}
        </view>
        <view class="tips">
          {{ "Click here to modify the enterprise logo" }}
        </view>
      </view>
        <view
            style="margin-top: 40rpx"
            class="avatar-box">
          <image
              v-if="requestParam.fileIdOfLogo"
              class="avatar"
              mode="widthFix"
              :src="$kt.file.visit(requestParam.fileIdOfLogo)"></image>
        </view>
    </view>

    <view class="box">
      <view>{{"Enterprise Name"}}</view>
      <view style="height: 10rpx"></view>
      <input
          class="info-input"
          v-model="requestParam.name"
          :placeholder="'Please enter the enterprise name'"
      ></input>
    </view>

    <view class="bottom">
      <kt-button
          @click="toSave"
          ref="saveBtn"
          :is-open-box-shadow="false"
          class="bottom-btn">
        {{ "Confirm" }}
      </kt-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      requestParam:{
        id:null,
        fileIdOfLogo: "",
        name:"",
      },
      opt:null
    };
  },
  onLoad(option) {
    this.requestParam.id = option.id;
    this.opt = option.opt;
    if(this.requestParam.id){
      this.getById();
    }
  },
  methods: {
    getById() {
      this.$kt.request.send({
        uri: '/business-erp-web/erpEnterprise/getById',
        data: {
          id: this.requestParam.id
        },
        stateSuccess: (res) => {
          this.requestParam = res.data;
        },
        stateFail: (res) => {
        }
      });
    },
    uploadLogo() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.$kt.image.toImageClip(res.tempFilePaths[0],300,300).then((data)=>{
                uni.showLoading();
                // 上传头像
                this.$kt.request.uploadFile({
                  data: {
                    file: data,
                    groupCode: 'enterpriseLogo'
                  },
                  stateSuccess: (res1) => {
                    this.requestParam.fileIdOfLogo = res1.data.id;
                    uni.hideLoading();
                  },
                  stateFail: (err) => {
                  }
                })
          });
        }});
    },
    toSave() {
      let uri = '/business-erp-web/erpEnterprise/addBySelf';
      if(this.opt === "update"){
        uri = '/business-erp-web/erpEnterprise/updateBySelf';
      }
      this.$refs.saveBtn.loading();
      this.$kt.request.send({
        uri,
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$refs.saveBtn.success(res.msg);
          this.$kt.event.emit("enterpriseSave");
          uni.navigateBack();
        },
        stateFail: (res) => {
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-box {
  position: absolute;
  display: inline-block;
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  overflow: hidden;
  border: none;
  vertical-align: top;
  top:-20rpx;
  right: 40rpx;

  .avatar {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

}
.box {
  position: relative;
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 50rpx;

  .title {
    position: relative;
    font-size: 36rpx;
    color: #333;

    .title-plus {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 32rpx;
      color: #666;
      border: 1rpx solid #666666;
      border-radius: 55%;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

  }

  .tips {
    font-size: 24rpx;
    color: #666;
  }

  text-align: left;
  border: none;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;

  .info-input {
    width: 100%;
    border: none;
    font-size: 32rpx;
    color: #000;
    background-color: #fff;
    font-weight: bold;
  }
}

.a-box {
  border: none;
  border-bottom: 1rpx solid #f0f0f0;
}

.a-box:active {
  opacity: .8;
}

.bottom{
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 40rpx;
  box-sizing: border-box;
}

.bottom-btn{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  bottom: 0;
}

.bottom-btn:active{
  opacity: .8;
}


</style>
